<template>
	<view style="color: white;background-color: #58b881;display: flex;flex-direction: column;align-items: center;padding-top: 125px;min-height:calc(100vh);position: relative;">
		<image class="logo" src="/static/icon.png" :style="{width:os=='pc'?'150px':'120px'}" mode="widthFix"></image>
		<p :class="{pc1:os=='pc',mobile1:os=='mobile'}" style="font-weight: 800;margin-top: 10px;">小二云盘</p>
		<p :class="{pc2:os=='pc',mobile2:os=='mobile'}" style="line-height: 20px;margin-top: 9px;text-align: center;">分享传播快乐，让分享变得更容易<br>免费的文件资源分享平台</p>
		<view @click="go" style="display: flex;align-items: center;background-color: rgba(255, 255, 255, 0.2);width: 230px;height: 55px;border-radius: 100px;justify-content: center;margin-top: 40px;">
			<image src="../../static/android.png" style="width: 30px;height: 30px;margin-right: 26px;"></image>
			<p>Android下载</p>
		</view>
		<view style="position: absolute;top: 20px;display: flex;align-items: center;justify-content: space-between;right: 20px;left: 20px;">
			<image src="/static/x2ink.png" style="height: 25px;" mode="heightFix">
			</image>
			<view>
				<view @click="open" style="background-color: hsla(0,0%,100%,.1);padding: 5px 10px;border-radius: 4px;">
					公众号
				</view>
				<uni-transition mode-class="fade" :duration="1000" :show="show">
					<image src="../../static/qr-weixin.04a97584.png"
						style="height:210px;position: absolute;right: -10px;" mode="heightFix"></image>
				</uni-transition>
			</view>
		</view>
		<view style="border-radius: 15px 15px 0 0;height: 50px;background-color: white;position: absolute;bottom: 0px;width: 100%;">
		</view>
	</view>
	<!-- 这是PC端 -->
	<view v-if="os=='pc'">
		<view style="padding: 145px 135px 95px 135px;">
			<h2 style="font-weight:500;font-size: 40px;line-height: 56px;text-align: center;">致力于为你解决文件分享问题</h2>
			<h3 style="margin-top: 12px;font-weight: 400;font-size: 24px;text-align: center;">为分享扫除障碍</h3>
			<view style="padding: 70px;display: flex;margin-top: 104px;align-items: center;">
				<view style="width: 50%;display: flex;align-items: center;justify-content: center;position: relative;">
					<view style="background-color: #58b881;border-radius: 999px;width:450px;height:450px ;">
						
					</view>
					<video object-fit="fill" src="/static/4.mp4" :show-center-play-btn='false' autoplay loop muted
						:controls='false'
						style="height: 568px;width:320px;box-shadow: 0 0.533333vw 1.6vw rgba(0,0,0,.12);position: absolute;"></video>
				</view>
				<view style="width: 50%;margin-left: 50px;">
					<view style="display: flex;align-items: center;">
						<view style="height: 14px;width: 14px;background-color: #509bf8;transform: rotate(45deg);">
						</view>
						<p style="line-height: 44px;font-size: 32px;font-weight: 500;padding-left: 26px;">免费软件库</p>
					</view>
					<p style="margin-top: 12px;font-weight: 400;line-height: 32px;font-size: 18px;">
						内有各种破解，稀奇软件资源提供，都可免费下载，还有海量iApp，网站源码全都免费下载！</p>
				</view>
			</view>
			<view style="padding: 70px;display: flex;margin-top: 104px;align-items: center;">
				<view style="width: 50%;">
					<view style="display: flex;align-items: center;">
						<view style="height: 14px;width: 14px;background-color: #509bf8;transform: rotate(45deg);">
						</view>
						<p style="line-height: 44px;font-size: 32px;font-weight: 500;padding-left: 26px;">上传文件</p>
					</view>
					<p style="margin-top: 12px;font-weight: 400;line-height: 32px;font-size: 18px;">
						用户上传各种文件之后可获取分享链接与文件直链，应用会自动获取应用信息生成软件下载页</p>
				</view>
				<view style="width: 50%;display: flex;align-items: center;justify-content: center;position: relative;margin-left: 50px;">
					<view style="background-color: #58b881;border-radius: 999px;width:450px;height:450px ;">
						
					</view>
					<video object-fit="fill" src="/static/1.mp4" :show-center-play-btn='false' autoplay loop muted
						:controls='false'
						style="height: 568px;width:320px;box-shadow: 0 0.533333vw 1.6vw rgba(0,0,0,.12);position: absolute;"></video>
				</view>
			</view>
			<view style="padding: 70px;display: flex;margin-top: 104px;align-items: center;">
				<view style="width: 50%;display: flex;align-items: center;justify-content: center;position: relative;">
					<view style="background-color: #58b881;border-radius: 999px;width:450px;height:450px ;">
						
					</view>
					<video object-fit="fill" src="/static/2.mp4" :show-center-play-btn='false' autoplay loop muted
						:controls='false'
						style="height: 568px;width:320px;box-shadow: 0 0.533333vw 1.6vw rgba(0,0,0,.12);position: absolute;"></video>
				</view>
				<view style="width: 50%;margin-left: 50px;">
					<view style="display: flex;align-items: center;">
						<view style="height: 14px;width: 14px;background-color: #509bf8;transform: rotate(45deg);">
						</view>
						<p style="line-height: 44px;font-size: 32px;font-weight: 500;padding-left: 26px;">开启网赚</p>
					</view>
					<p style="margin-top: 12px;font-weight: 400;line-height: 32px;font-size: 18px;">
						文件可设置价格发布社区进行售卖，开放Api接口，可对接软件库开启网赚之路！</p>
				</view>
			</view>
			<view style="padding: 70px;display: flex;margin-top: 104px;align-items: center;">
				<view style="width: 50%;">
					<view style="display: flex;align-items: center;">
						<view style="height: 14px;width: 14px;background-color: #509bf8;transform: rotate(45deg);">
						</view>
						<p style="line-height: 44px;font-size: 32px;font-weight: 500;padding-left: 26px;">分享模板</p>
					</view>
					<p style="margin-top: 12px;font-weight: 400;line-height: 32px;font-size: 18px;">
						海量分享模板，体验个性分享。可作为开发者软件官网使用，软件库分享基地等</p>
				</view>
				<view style="width: 50%;display: flex;align-items: center;justify-content: center;position: relative;margin-left: 50px;">
					<view style="background-color: #58b881;border-radius: 999px;width:450px;height:450px ;">
						
					</view>
					<video object-fit="fill" src="/static/3.mp4" :show-center-play-btn='false' autoplay loop muted
						:controls='false'
						style="height: 568px;width:320px;box-shadow: 0 0.533333vw 1.6vw rgba(0,0,0,.12);position: absolute;"></video>
				</view>
			</view>
		</view>
		<view style="background-color: #283044;padding: 60px 30px;color: white;font-size: 14px;margin-top: 50px;display: flex;justify-content: space-between;">
			<view>
				<view style="display: flex;">
					<p style="margin-right: 20px;" @click="uigo('ysxy')">用户协议</p>
					<p style="margin-right: 20px;" @click="uigo('ysxy')">隐私政策</p>
				</view>
				<p style="margin-top: 10px;color: #a2a5ae;">意见反馈：339851531@qq.com</p>
				<p style="margin-top: 20px;color: #a2a5ae;">风辞优选网络科技工作室 版权所有 <br>© 2023 www.x2.ink. All Rights Reserved.</p>
					<view style="display: flex;flex-direction: column;height: 60px;justify-content: space-around;margin-top: 10px;">
					<view style="display: flex;flex-direction: column;height: 50px;justify-content: space-around;">
						<a href="https://beian.miit.gov.cn/#/Integrated/index"
							style="text-decoration: none;color: #a2a5ae;">皖ICP备2023004593号-1</a>
					</view>
				</view>
			</view>
			<view>
				<p>下载App</p>
				<view style="display: flex;margin-top: 20px;font-size: 13px;">
					<view>
						<image src="/static/qrcode_for_gh_036dc27e01fb_1280.jpg" style="width: 108px;height: 108px;"></image>
						<p style="margin-top: 12px;text-align: center;">公众号获取</p>
					</view>
					<view style="margin-left: 56px;">
						<image src="/static/20230416161704.jpg" style="width: 108px;height: 108px;"></image>
					<p style="margin-top: 12px;text-align: center;">官网获取</p>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 这是移动端 -->
	<view v-if="os=='mobile'">
		<h2 style="margin-top: 50px;font-weight: 500;font-size: 5.86vw;line-height: 8vw;text-align: center;">一个集软件库为一身的云盘
		</h2>
		<view style="position: relative;">
			<view
				style="height: 50px;position: absolute;top: 10.666vw;display: flex;align-items: center;justify-content: center;width: 100%;">
				<p :style="{color:current==0?'#58b881':'#eeeeee',margin: '5px'}">●</p>
				<p :style="{color:current==1?'#58b881':'#eeeeee',margin: '5px'}">●</p>
				<p :style="{color:current==2?'#58b881':'#eeeeee',margin: '5px'}">●</p>
				<p :style="{color:current==3?'#58b881':'#eeeeee',margin: '5px'}">●</p>
			</view>
			<swiper @change="change" circular style="height: 145.6vw;margin-top: 4.266vw;position: relative;" :current="current">
				<swiper-item>
							<p style="font-size: 3.7vw;line-height: 6.4vw;font-weight: 400;text-align: center;padding: 0 15px;">
								内有各种破解，稀奇软件资源提供，都可免费下载，还有海量iApp，网站源码全都免费下载！</p>
							<view style="bottom: 16.266667vw;position: absolute;width: 100%;display: flex;align-items: center;justify-content: center;">
								<view style="background-color: #58b881;border-radius: 999px;width:84vw;height:84vw ;">
									
								</view>
							</view>
							<view style="text-align: center;margin-top: 50px;position: relative;">
								<video id="video1" @loadedmetadata="play" object-fit="fill" :show-center-play-btn='false' autoplay loop muted
									:controls='false'
									 x5-video-player-type="h5"
									 src="/static/4.mp4"
									style="height: 116.266667vw;width: 65.333333vw;box-shadow: 0 0.533333vw 1.6vw rgba(0,0,0,.12);">
									</video>
				<view style="position: absolute;width: 100%;bottom: 0px;top: 0px;"/>
							</view>
						</swiper-item>
				<swiper-item>
					<p style="font-size: 3.7vw;line-height: 6.4vw;font-weight: 400;text-align: center;padding: 0 15px;">
						用户上传各种文件之后可获取分享链接与文件直链，应用会自动获取应用信息生成软件下载页</p>
					<view style="bottom: 16.266667vw;position: absolute;width: 100%;display: flex;align-items: center;justify-content: center;">
						<view style="background-color: #58b881;border-radius: 999px;width:84vw;height:84vw ;">
							
						</view>
					</view>
					<view style="text-align: center;margin-top: 50px;position: relative;">
						<video id="video1" @loadedmetadata="play" object-fit="fill" :show-center-play-btn='false' autoplay loop muted
							:controls='false'
							 x5-video-player-type="h5"
							 src="/static/1.mp4"
							style="height: 116.266667vw;width: 65.333333vw;box-shadow: 0 0.533333vw 1.6vw rgba(0,0,0,.12);">
							</video>
		<view style="position: absolute;width: 100%;bottom: 0px;top: 0px;"/>
					</view>
				</swiper-item>
				<swiper-item>
					<p style="font-size: 3.7vw;line-height: 6.4vw;font-weight: 400;text-align: center;padding: 0 15px;">
						文件可设置价格发布社区进行售卖，开放Api接口，可对接软件库开启网赚之路！</p>
					<view style="bottom: 16.266667vw;position: absolute;width: 100%;display: flex;align-items: center;justify-content: center;">
						<view style="background-color: #58b881;border-radius: 999px;width:84vw;height:84vw ;">
							
						</view>
					</view>
					<view style="text-align: center;margin-top: 50px;position: relative;">
					<video id="video2" object-fit="fill" src="/static/2.mp4" :show-center-play-btn='false' autoplay loop muted
						:controls='false'
						x5-video-player-type="h5"
						style="height: 116.266667vw;width: 65.333333vw;box-shadow: 0 0.533333vw 1.6vw rgba(0,0,0,.12);"></video>
							<view style="position: absolute;width: 100%;bottom: 0px;top: 0px;"/>
					</view>
				</swiper-item>
				<swiper-item>
					<p style="font-size: 3.7vw;line-height: 6.4vw;font-weight: 400;text-align: center;padding: 0 15px;">
						海量分享模板，体验个性分享。可作为开发者软件官网使用，软件库分享基地等</p>
					<view style="bottom: 16.266667vw;position: absolute;width: 100%;display: flex;align-items: center;justify-content: center;">
						<view style="background-color: #58b881;border-radius: 999px;width:84vw;height:84vw ;">
							
						</view>
					</view>
					<view style="text-align: center;margin-top: 50px;position: relative;">
						<video id="video3" object-fit="fill" src="/static/3.mp4" :show-center-play-btn='false' autoplay loop muted
							:controls='false'
							x5-video-player-type="h5"
							style="height: 116.266667vw;width: 65.333333vw;box-shadow: 0 0.533333vw 1.6vw rgba(0,0,0,.12);"></video>
							<view style="position: absolute;width: 100%;bottom: 0px;top: 0px;"/>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view style="background-color: #283044;padding: 30px;color: white;font-size: 12px;margin-top: 100px;">
			<view style="display: flex;">
				<p style="margin-right: 20px;" @click="uigo('ysxy')">用户协议</p>
				<p style="margin-right: 20px;" @click="uigo('ysxy')">隐私政策</p>
			</view>
			<p style="margin-top: 10px;color: #a2a5ae;">意见反馈：339851531@qq.com</p>
			<p style="margin-top: 20px;color: #a2a5ae;">风辞优选网络科技工作室 版权所有 <br>© 2023 www.x2.ink. All Rights Reserved.</p>
			<view style="display: flex;flex-direction: column;height: 50px;justify-content: space-around;">
				<a href="https://beian.miit.gov.cn/#/Integrated/index"
					style="text-decoration: none;color: #a2a5ae;">皖ICP备2023004593号-1</a>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				os:null,
				current:0,
			}
		},
		mounted() {
			document.addEventListener('touchstart', function(){
				uni.createVideoContext('video1').play()
			}, true);
		},
		methods: {
			go(){
				uni.showModal({
					title: '温馨提示',
					content: '本App已于2023年10月10日永久关闭，需要演示请联系站长',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

				// window.location.href=url
			},
			uigo(path) {
				uni.navigateTo({
					url: '../' + path + '/' + path
				});
			},
			open() {
				this.show = !this.show
			},
			change(e) {
				this.current = e.detail.current
			}
		},
		onLoad() {
			var that=this
			uni.getSystemInfo({success(res) {
				if(res.osName=='ios'||res.osName=='android'){
					that.os="mobile"
				}else{
					that.os="pc"
				}
			}})
		}
	}
</script>
<style>
	page{
		font-family:'ShuHeiTi'
	}
	.pc1{
		font-size: 32px;
	}
	.mobile1{
		font-size: 24px;
	}
	.pc2{
		font-size: 16px;
	}
	.mobile2{
		font-size: 14.4px;
	}
</style>